<template>
  <div>
    <headerNav></headerNav>
    <div class="mv_box">
      <div class="mv">
        <ul>
          <router-link
          tag="li"
            v-for="item in mvlist"
            :key="item.id"
            :to="{name:'mvlist',query:{id:item.id,subed:item.subed}}"
          >
            <div class="img">
              <img :src="item.cover" />
              <div class="play iconfont icon-bofang"></div>
            </div>
            <div class="playnum">
              播放量：<span>{{ item.playCount | playCount }}</span>
            </div>
            <div class="name">
              <p class="item_name">{{ item.name }}</p>
              <p class="artistName">{{ item.artistName }}</p>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import headerNav from "../components/base/headerNav.vue";
import { getMvall } from "../api/mv";
export default {
  components: {
    headerNav,
  },
  created() {
    getMvall({ area: "" }).then((data) => {
      console.log(data);
      this.mvlist = data.data;
    });
  },
  data() {
    return {
      mvlist: [],
      mvlistid: [],
    };
  },


  filters: {
    playCount(value) {
      let w = value > 10000 ? (value / 10000).toFixed(1) : value;
      let hm = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w + "万";
      return hm;
    },
  },
};
</script>

<style lang="less">
.mv_box {
  background-color: #f6f6f6;
  .mv_type {
    font-size: 13px;
    padding: 15px;
    li {
      color: #565658;
      span {
        display: inline-block;
        margin-right: 10px;
        padding: 4px;
        color: #6a6969;
        position: relative;
      }
      span:after {
        content: "";
        position: absolute;
        display: inline-block;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 10px;
        margin-left: 8px;
        background-color: #6a6969;
      }
      span:last-child::after {
        content: none;
      }
    }
  }
  .mv {
    width: 100%;
    padding: 5px;
    height: 100%;
    box-sizing: border-box;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 49%;
        border-radius: 8px;
        padding: 15px 5px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 8px;
        // box-shadow: 0 1px 2px 0 #c0c0c0;
        margin-top: 10px;
        .img {
          width: 100%;
          height: 102px;
          margin-top: 10px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .play {
            position: absolute;
            color: #fff;
            font-size: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .playnum {
          font-size: 12px;
          margin-top: 8px;
          span {
            color: #9e9e9e;
          }
        }

        .name {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          line-height: 20px;
          margin-top: 10px;
          .item_name {
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .artistName {
            font-size: 12px;
            color: #6a6969;
            text-align: right;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>